<template>
	<view class="my-container">
		<view class="my-container-top">
			<view class="user_img">
				<image src="@/static/images/user_img.png" />
			</view>
		</view>
		<view class="my-container-main">
			<up-cell-group size="large">
				<!-- <up-cell icon="setting" title="昵称" :value="userInfo.userName"></up-cell> -->
				<up-cell icon="account" title="姓名" :value="userInfo.userName"></up-cell>
				<up-cell icon="woman" title="性别" :value="userInfo.sex"></up-cell>
				<up-cell icon="phone" title="手机号" :value="userInfo.phone"></up-cell>
				<up-cell icon="email" title="邮箱" :value="userInfo.email"></up-cell>
			</up-cell-group>
			<view class="logout-btn">
				<up-button type="primary" size="large" color="#246eff" @click="handleLogout">退出登录</up-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Logout
	} from '@/api/index.js';
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			const userData = uni.getStorageSync('user_info');
			this.userInfo = userData;
		},
		methods: {
			async handleLogout() {
				const token = uni.getStorageSync('token_key');
				const res = await Logout({
					token: token
				});
				uni.clearStorageSync()
				uni.showToast({
					title: '退出成功！',
					icon: 'success'
				})
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container-top {
		height: 300rpx;
		background-color: #246eff;
		position: relative;
	}

	.user_img {
		position: absolute;
		bottom: -160rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			border: 2px solid #fff;
		}
	}

	.logout-btn {
		width: 100%;
		padding: 50rpx;
		box-sizing: border-box;

		button {
			width: 100%;
		}
	}
</style>